<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #app {
        width: 375px;
        height: 667px;
        border: 1px solid #000;
        margin: 8px;
        position: relative;
      }
      header {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #000;
        text-align: center;
        line-height: 50px;
      }
      footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-top: 1px solid #000;
      }

      li {
        width: 345px;
        height: 120px;
        border: 1px solid #000;
        margin: 15px;
      }
    </style>
  </head>
  <body>
    <!-- 这里写的html其实就是根组件的template选项 -->
    <div id="app">
      <div :style="{ fontSize: size + 'px' }">
        <wb-header @tobig="fn"></wb-header>
        <wb-content></wb-content>
        <wb-footer></wb-footer>
      </div>
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      const { createApp } = Vue;

      // 用局部创建组件的方式创建头部组件
      // 组件注册要注册在它的父组件上面
      const WbHeader = {
        data() {
          return {
            size: 14,
          };
        },
        template: `
          <header>微博头部 - <button @click="add">+</button></header>
        `,
        methods: {
          add() {
            this.size++;
            this.$emit("tobig", this.size);
          },
        },
        mounted() {
          this.$emit("tobig", this.size);
        },
      };

      // 子
      const WbContentItem = {
        props: ["item"],
        template: `
          <li>
            <h3>{{ item.title }}</h3>
            <p>{{ item.content }}</p>
            <button>点赞</button>
          </li>
        `,
      };

      // 父
      const WbContent = {
        data() {
          return {
            newsarr: [
              {
                title: "多举措推动经济持续好转",
                content:
                  "记者从国家发展改革委今天（4月19日）举行的新闻发布会上了解到",
              },
              {
                title: "中国式现代化",
                content:
                  "习近平总书记强调，一个国家走向现代化，既要遵循现代化一般规律",
              },
              {
                title: "四好农村路",
                content: "重庆市万盛经开区，丛林互通至黑山八角公路连接多个景区",
              },
            ],
          };
        },
        template: `
          <ul>
            <wb-content-item v-for="item in newsarr" :item="item"></wb-content-item>
          </ul>
        `,
        components: {
          WbContentItem,
        },
      };

      const WbFooter = {
        template: `
          <footer>
            <input type="text" />
            <button>发布</button>
          </footer>
        `,
      };

      // createApp创建的可以认为就是根组件
      createApp({
        data() {
          return {
            size: 0,
          };
        },
        methods: {
          fn(size) {
            this.size = size;
          },
        },
        components: {
          WbHeader,
          WbContent,
          WbFooter,
        },
      }).mount("#app");
    </script>
  </body>
</html>
